<template>
  <div class="college-management">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-auto" src="/logo.png" alt="学生健康上报系统" />
              <span class="ml-2 text-xl font-bold text-gray-800">学生健康上报系统</span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="ml-3 relative">
              <div class="flex items-center space-x-4">
                <Bell class="h-5 w-5 text-gray-500" />
                <div class="flex items-center">
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="" />
                  <span class="ml-2 text-sm font-medium text-gray-700">王校长</span>
                  <ChevronDown class="ml-1 h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-gray-800 min-h-screen">
        <nav class="mt-5 px-2">
          <div class="space-y-1">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <LayoutDashboard class="mr-3 h-5 w-5" />
              数据看板
            </a>
            <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Users class="mr-3 h-5 w-5" />
              学院管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <ClipboardList class="mr-3 h-5 w-5" />
              上报记录
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <AlertTriangle class="mr-3 h-5 w-5" />
              异常管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <FileText class="mr-3 h-5 w-5" />
              统计报表
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Settings class="mr-3 h-5 w-5" />
              系统设置
            </a>
          </div>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 bg-gray-100 p-6">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6 flex justify-between items-center">
            <div>
              <h1 class="text-2xl font-semibold text-gray-900">学院管理</h1>
              <p class="mt-1 text-sm text-gray-500">管理学校下属学院信息及辅导员</p>
            </div>
            <button 
              @click="showAddCollegeDialog = true"
              class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
            >
              <Plus class="w-4 h-4 mr-1" />
              添加学院
            </button>
          </div>

          <!-- 搜索和筛选 -->
          <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-wrap gap-4">
              <div class="flex-1 min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1">学院名称</label>
                <div class="relative">
                  <input 
                    type="text" 
                    v-model="filters.name"
                    placeholder="搜索学院名称" 
                    class="pl-8 pr-4 py-2 w-full border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                  <Search class="w-4 h-4 text-gray-400 absolute left-2.5 top-2.5" />
                </div>
              </div>
              <div class="flex-1 min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1">学院状态</label>
                <select 
                  v-model="filters.status"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">全部状态</option>
                  <option value="active">正常</option>
                  <option value="inactive">停用</option>
                </select>
              </div>
              <div class="flex-1 min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1">上报完成率</label>
                <select 
                  v-model="filters.completionRate"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">全部</option>
                  <option value="100">100%</option>
                  <option value="75">75%以上</option>
                  <option value="50">50%以上</option>
                  <option value="25">25%以上</option>
                  <option value="0">0%以上</option>
                </select>
              </div>
              <div class="flex items-end">
                <button 
                  @click="applyFilters"
                  class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors"
                >
                  筛选
                </button>
                <button 
                  @click="resetFilters"
                  class="ml-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors"
                >
                  重置
                </button>
              </div>
            </div>
          </div>

          <!-- 学院列表 -->
          <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学院名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学院代码</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">辅导员数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报完成率</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(college, index) in colleges" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                          <span class="text-blue-600 font-medium">{{ college.name.substring(0, 2) }}</span>
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-gray-900">{{ college.name }}</div>
                          <div class="text-sm text-gray-500">创建于 {{ college.createdAt }}</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-gray-900">{{ college.code }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-gray-900">{{ college.counselorCount }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-gray-900">{{ college.studentCount }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <span 
                          :class="{
                            'px-2 py-1 text-xs rounded-full': true,
                            'bg-green-100 text-green-800': college.completionRate === 100,
                            'bg-yellow-100 text-yellow-800': college.completionRate >= 50 && college.completionRate < 100,
                            'bg-red-100 text-red-800': college.completionRate < 50
                          }"
                        >
                          {{ college.completionRate }}%
                        </span>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span 
                        :class="{
                          'px-2 py-1 text-xs rounded-full': true,
                          'bg-green-100 text-green-800': college.status === 'active',
                          'bg-gray-100 text-gray-800': college.status === 'inactive'
                        }"
                      >
                        {{ college.status === 'active' ? '正常' : '停用' }}
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <div class="flex space-x-2">
                        <button 
                          @click="viewCollegeDetail(college)"
                          class="text-blue-600 hover:text-blue-900"
                        >
                          查看
                        </button>
                        <button 
                          @click="editCollege(college)"
                          class="text-indigo-600 hover:text-indigo-900"
                        >
                          编辑
                        </button>
                        <button 
                          @click="toggleCollegeStatus(college)"
                          :class="{
                            'hover:text-red-900': college.status === 'active',
                            'text-red-600': college.status === 'active',
                            'hover:text-green-900': college.status === 'inactive',
                            'text-green-600': college.status === 'inactive'
                          }"
                        >
                          {{ college.status === 'active' ? '停用' : '启用' }}
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 分页 -->
          <div class="flex items-center justify-between">
            <div class="flex-1 flex justify-between sm:hidden">
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                上一页
              </a>
              <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                下一页
              </a>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
              <div>
                <p class="text-sm text-gray-700">
                  显示第 <span class="font-medium">1</span> 至 <span class="font-medium">10</span> 条，共 <span class="font-medium">{{ colleges.length }}</span> 条
                </p>
              </div>
              <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <ChevronLeft class="h-5 w-5" />
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    1
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600 hover:bg-blue-100">
                    2
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    3
                  </a>
                  <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                  </span>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    8
                  </a>
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <ChevronRight class="h-5 w-5" />
                  </a>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 添加学院弹窗 -->
    <div v-if="showAddCollegeDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-md w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-4">{{ isEditing ? '编辑学院' : '添加学院' }}</h3>
        
        <form @submit.prevent="saveCollege">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">学院名称</label>
            <input 
              v-model="newCollege.name" 
              type="text" 
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            >
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">学院代码</label>
            <input 
              v-model="newCollege.code" 
              type="text" 
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            >
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">学院简介</label>
            <textarea 
              v-model="newCollege.description" 
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              rows="3"
            ></textarea>
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">学院负责人</label>
            <input 
              v-model="newCollege.manager" 
              type="text" 
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
            <input 
              v-model="newCollege.phone" 
              type="tel" 
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
          </div>
          
          <div class="flex space-x-3 mt-6">
            <button 
              type="submit" 
              class="flex-1 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors"
            >
              保存
            </button>
            <button 
              type="button"
              @click="showAddCollegeDialog = false" 
              class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
            >
              取消
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 学院详情弹窗 -->
    <div v-if="showCollegeDetailDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-2xl w-full p-5">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium text-gray-800">学院详情</h3>
          <button @click="showCollegeDetailDialog = false" class="text-gray-400 hover:text-gray-500">
            <X class="h-5 w-5" />
          </button>
        </div>
        
        <div class="border-t border-gray-200 pt-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">学院名称</h4>
              <p class="text-sm text-gray-900">{{ selectedCollege.name }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">学院代码</h4>
              <p class="text-sm text-gray-900">{{ selectedCollege.code }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">学院负责人</h4>
              <p class="text-sm text-gray-900">{{ selectedCollege.manager }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-1">联系电话</h4>
              <p class="text-sm text-gray-900">{{ selectedCollege.phone }}</p>
            </div>
            <div class="md:col-span-2">
              <h4 class="text-sm font-medium text-gray-500 mb-1">学院简介</h4>
              <p class="text-sm text-gray-900">{{ selectedCollege.description || '暂无简介' }}</p>
            </div>
          </div>
          
          <!-- 辅导员列表 -->
          <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <h4 class="font-medium text-gray-800">辅导员列表</h4>
              <button 
                class="px-2 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors flex items-center"
              >
                <Plus class="w-3 h-3 mr-1" />
                添加辅导员
              </button>
            </div>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                    <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工号</th>
                    <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系方式</th>
                    <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">管理班级数</th>
                    <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(counselor, index) in counselors" :key="index">
                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">{{ counselor.name }}</td>
                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">{{ counselor.id }}</td>
                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">{{ counselor.phone }}</td>
                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">{{ counselor.classCount }}</td>
                    <td class="px-4 py-2 whitespace-nowrap">
                      <span 
                        :class="{
                          'px-2 py-0.5 text-xs rounded-full': true,
                          'bg-green-100 text-green-800': counselor.status === 'active',
                          'bg-gray-100 text-gray-800': counselor.status === 'inactive'
                        }"
                      >
                        {{ counselor.status === 'active' ? '在职' : '离职' }}
                      </span>
                    </td>
                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium">
                      <div class="flex space-x-2">
                        <button class="text-blue-600 hover:text-blue-900">查看</button>
                        <button class="text-indigo-600 hover:text-indigo-900">编辑</button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          
          <!-- 上报统计 -->
          <div>
            <h4 class="font-medium text-gray-800 mb-2">上报统计</h4>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                  <div class="text-sm font-medium text-gray-500">今日上报数</div>
                  <div class="mt-1 text-xl font-semibold text-blue-600">{{ selectedCollege.stats?.todayReportCount || 0 }}</div>
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-500">上报完成率</div>
                  <div class="mt-1 text-xl font-semibold text-green-600">{{ selectedCollege.completionRate }}%</div>
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-500">异常上报数</div>
                  <div class="mt-1 text-xl font-semibold text-red-600">{{ selectedCollege.stats?.abnormalCount || 0 }}</div>
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-500">未上报数</div>
                  <div class="mt-1 text-xl font-semibold text-yellow-600">{{ selectedCollege.stats?.notReportedCount || 0 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Bell,
  ChevronDown,
  LayoutDashboard,
  Users,
  ClipboardList,
  AlertTriangle,
  FileText,
  Settings,
  Search,
  Plus,
  ChevronLeft,
  ChevronRight,
  X
} from 'lucide-vue-next';

// 筛选条件
const filters = ref({
  name: '',
  status: '',
  completionRate: ''
});

// 学院列表
const colleges = ref([
  {
    name: '计算机学院',
    code: 'CS001',
    description: '计算机科学与技术学院成立于1985年，是学校最早成立的学院之一。',
    manager: '张院长',
    phone: '13800138001',
    counselorCount: 12,
    studentCount: 520,
    completionRate: 100,
    status: 'active',
    createdAt: '2020-09-01',
    stats: {
      todayReportCount: 520,
      abnormalCount: 5,
      notReportedCount: 0
    }
  },
  {
    name: '机械工程学院',
    code: 'ME002',
    description: '机械工程学院是学校重点学院，拥有多个国家级实验室。',
    manager: '李院长',
    phone: '13800138002',
    counselorCount: 15,
    studentCount: 1250,
    completionRate: 92,
    status: 'active',
    createdAt: '2020-09-01',
    stats: {
      todayReportCount: 1150,
      abnormalCount: 12,
      notReportedCount: 100
    }
  },
  {
    name: '经济管理学院',
    code: 'EM003',
    description: '经济管理学院是学校综合性学院，培养经济、管理、金融等方面的人才。',
    manager: '王院长',
    phone: '13800138003',
    counselorCount: 10,
    studentCount: 1000,
    completionRate: 75,
    status: 'active',
    createdAt: '2020-09-01',
    stats: {
      todayReportCount: 750,
      abnormalCount: 8,
      notReportedCount: 250
    }
  },
  {
    name: '外国语学院',
    code: 'FL004',
    description: '外国语学院是培养外语人才的专业学院，拥有多个语种的教学资源。',
    manager: '刘院长',
    phone: '13800138004',
    counselorCount: 8,
    studentCount: 500,
    completionRate: 80,
    status: 'active',
    createdAt: '2020-09-01',
    stats: {
      todayReportCount: 400,
      abnormalCount: 6,
      notReportedCount: 100
    }
  },
  {
    name: '艺术设计学院',
    code: 'AD005',
    description: '艺术设计学院是培养艺术设计人才的专业学院，拥有多个专业工作室。',
    manager: '赵院长',
    phone: '13800138005',
    counselorCount: 5,
    studentCount: 300,
    completionRate: 0,
    status: 'inactive',
    createdAt: '2020-09-01',
    stats: {
      todayReportCount: 0,
      abnormalCount: 0,
      notReportedCount: 300
    }
  }
]);

// 辅导员列表
const counselors = ref([
  {
    name: '张老师',
    id: 'T001',
    phone: '13900139001',
    classCount: 3,
    status: 'active'
  },
  {
    name: '李老师',
    id: 'T002',
    phone: '13900139002',
    classCount: 2,
    status: 'active'
  },
  {
    name: '王老师',
    id: 'T003',
    phone: '13900139003',
    classCount: 4,
    status: 'active'
  },
  {
    name: '赵老师',
    id: 'T004',
    phone: '13900139004',
    classCount: 3,
    status: 'inactive'
  }
]);

// 弹窗控制
const showAddCollegeDialog = ref(false);
const showCollegeDetailDialog = ref(false);
const isEditing = ref(false);

// 新学院
const newCollege = ref({
  name: '',
  code: '',
  description: '',
  manager: '',
  phone: ''
});

// 选中的学院
const selectedCollege = ref({});

// 应用筛选
const applyFilters = () => {
  console.log('应用筛选:', filters.value);
  // 实际应用中，这里会调用API获取筛选后的数据
};

// 重置筛选
const resetFilters = () => {
  filters.value = {
    name: '',
    status: '',
    completionRate: ''
  };
};

// 查看学院详情
const viewCollegeDetail = (college) => {
  selectedCollege.value = college;
  showCollegeDetailDialog.value = true;
};

// 编辑学院
const editCollege = (college) => {
  isEditing.value = true;
  newCollege.value = { ...college };
  showAddCollegeDialog.value = true;
};

// 切换学院状态
const toggleCollegeStatus = (college) => {
  college.status = college.status === 'active' ? 'inactive' : 'active';
  console.log('切换学院状态:', college.name, college.status);
};

// 保存学院
const saveCollege = () => {
  if (isEditing.value) {
    // 更新现有学院
    const index = colleges.value.findIndex(c => c.code === newCollege.value.code);
    if (index !== -1) {
      colleges.value[index] = { 
        ...colleges.value[index],
        ...newCollege.value 
      };
    }
  } else {
    // 添加新学院
    colleges.value.push({
      ...newCollege.value,
      counselorCount: 0,
      studentCount: 0,
      completionRate: 0,
      status: 'active',
      createdAt: new Date().toISOString().split('T')[0],
      stats: {
        todayReportCount: 0,
        abnormalCount: 0,
        notReportedCount: 0
      }
    });
  }
  
  // 重置表单并关闭弹窗
  newCollege.value = {
    name: '',
    code: '',
    description: '',
    manager: '',
    phone: ''
  };
  isEditing.value = false;
  showAddCollegeDialog.value = false;
};
</script>